<template>
  <div class="tree-container">
    <div class="tree-title">
      <slot name="title"> {{ propTitle }} </slot>
      <div class="title-append">
        <slot name="titleAppend">
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-icon
                @click="$emit('add')"
                v-bind="attrs"
                v-on="{ mouseleave: on.mouseleave, mouseenter: on.mouseenter }"
                color="#fff"
                class="add-icon pointer mr-1"
              >
                mdi-plus
              </v-icon>
            </template>
            <span>{{ propAddTooltip }}</span>
          </v-tooltip>
        </slot>
      </div>
    </div>
    <v-treeview open-on-click class="tree" v-on="$listeners" v-bind="$attrs">
      <template v-for="(value, name) in $scopedSlots" #[name]="slotData">
        <slot :name="name" v-bind="slotData"></slot>
      </template>
      <template #label="slotData">
        <slot name="label" v-bind="slotData">
          <div>
            {{ slotData.item.name }}
          </div>
        </slot>
      </template>
      <template #append="slotData">
        <slot name="append" v-bind="slotData">
          <div @click.stop class="action">
            <v-tooltip bottom>
              <template v-slot:activator="{ on, attrs }">
                <v-icon
                  @click="$emit('addItem')"
                  small
                  class="mr-2 pointer"
                  color="#79839B"
                  v-bind="attrs"
                  v-on="on"
                >
                  mdi-plus
                </v-icon>
              </template>
              <span>add item</span>
            </v-tooltip>
            <v-tooltip bottom>
              <template v-slot:activator="{ on, attrs }">
                <v-icon
                  @click="$emit('addArea')"
                  small
                  class="mr-2 pointer"
                  color="#79839B"
                  v-bind="attrs"
                  v-on="on"
                >
                  mdi-plus-box
                </v-icon>
              </template>
              <span>add group</span>
            </v-tooltip>
            <v-tooltip bottom>
              <template v-slot:activator="{ on, attrs }">
                <v-icon
                  @click="$emit('editItem')"
                  small
                  class="mr-2 pointer"
                  color="#79839B"
                  v-bind="attrs"
                  v-on="on"
                >
                  mdi-square-edit-outline
                </v-icon>
              </template>
              <span>edit</span>
            </v-tooltip>
            <v-tooltip bottom>
              <template v-slot:activator="{ on, attrs }">
                <v-icon
                  @click="$emit('deleteItem')"
                  small
                  v-bind="attrs"
                  v-on="on"
                >
                  mdi-delete
                </v-icon>
              </template>
              <span>delete</span>
            </v-tooltip>
          </div>
        </slot>
      </template>
    </v-treeview>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  props: {
    title: {
      type: String,
      default: "Tree Title",
    },
    addTooltip: {
      type: String,
      default: "Add",
    },
  },
})
export default class Tree extends Vue {
  get propTitle() {
    return this.$props.title;
  }

  get propAddTooltip() {
    return this.$props.addTooltip;
  }
}
</script>

<style lang="scss" scoped>
@import "./Tree.scss";
</style>
